<template>
  <view class="expressContainer">
    <div class="top">
      <!-- 公告 -->
      <uni-notice-bar show-icon scrollable :text="announcement" class="notice" speed="20"/>
      <!-- 搜索 -->
      <view class="search">
        <uni-search-bar @confirm="searchConfirm" :focus="true" v-model="searchValue" @clear="clearConfirm"
          placeholder="请输入需要搜索的快递单号">
        </uni-search-bar>
      </view>
    </div>

    <!-- 快递信息区 -->
    <view class="expressInformation">
      <view class="expressCard" v-for="item in expressData">
        <wyb-button class="signBtn" width="100rpx" height="60rpx" radius="['50px']" type="filled" color="#ff84b4"
          @click="signBtn(item.informationId)" :disabled="item.informationSignTime != null ? true : false">签收</wyb-button>
        <view class="first">快递单号：{{ item.informationNumber }}</view>
        <view class="third">仓位号： {{ item.locationName }}</view>
        <view class="tag">
          <!-- 是否签收 -->  
          <uni-tag :inverted="true" type="warning" text="待签收" v-if="item.informationSignTime == null"/>
          <uni-tag :inverted="true" type="primary" text="已签收" v-if="item.informationSignTime != null"/>
          <uni-tag :inverted="true"  type="success" :text="'入库时间：'+item.informationCreateTime"></uni-tag>
        </view>

      </view>

    </view>
  </view>
</template>

<script>
  export default {
    // 下拉刷新动作
    onPullDownRefresh() {
      this.searchValue = '';
      this.getExpressData();
      this.getAnnouncement();
      uni.stopPullDownRefresh();
    },
    data() {
      return {
        searchValue: '',
        expressData: [],
        announcement:'',
      }
    },
    // 钩子
    onLoad() {
      this.searchValue = '';
      this.getExpressData();
      this.getAnnouncement();
    },
    onTabItemTap(){
      this.getExpressData();
      this.getAnnouncement();
    },
    methods: {
      // 获取个人快递信息数据
      getExpressData(){
        var token;
        // 获取token
        var token = uni.getStorageSync('token');
        this.expressData = [];
        uni.showLoading({
          title: '加载中...'
        });
        this.$http.get('/api/expressForMini/getMyExpressData',{
          query: this.searchValue
        }).then((res) => {
          if(res.data.code == 200){
            for (let i = 0; i < res.data.data.length; i++) {
              var item = {};
              item.informationId = res.data.data[i].informationId;
              item.informationName = res.data.data[i].informationName;
              item.informationMobile = res.data.data[i].informationMobile;
              item.informationNumber = res.data.data[i].informationNumber;
              item.informationCreateTime = res.data.data[i].informationCreateTime;
              item.informationSignTime = res.data.data[i].informationSignTime;
              item.locationName = res.data.data[i].locationName;
              item.locationId = res.data.data[i].locationId;
              item.userId = res.data.data[i].userId;
              this.expressData.push(item);
            }
          }else{
            uni.showToast({
              title: '服务器错误请稍后重试！',
              icon: 'none',
              duration: 2000
            })
          }
          uni.hideLoading(); 
        }); 
      },
      // 获取公告信息
      getAnnouncement(){
        this.$http.get('/api/announcement/getAnnouncement').then((res) => {
          if(res.data.code == 200) {
            // 赋值
            if(res.data.data.length == 0){
              this.announcement = '暂无公告';
              return;
            }
            for (var i = 0; i < res.data.data.length; i++) {
              this.announcement = this.announcement + "公告：" + res.data.data[i].announceContent + "     ";
            }
          }else {
            uni.showToast({
              title: '获取公告失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      },
      // 搜索确认 
      searchConfirm(){ 
        this.getExpressData();
      },
      // 点击了清除
      clearConfirm(){
        this.searchValue = '';
        this.getExpressData();
      },
      // 点击签收
      signBtn(informationId) {
        console.log(informationId);
        var _this = this;
        // 调起条码扫描
        uni.scanCode({
          scanType: ['barCode'],
          success: function(res) {
            console.log('条码类型：' + res.scanType);
            console.log('条码内容：' + res.result);
            uni.showLoading({
              title: '签收中...'
            })
            /* 处理请求 */
            _this.$http.put("/api/expressForMini/sign",{
              informationNumber: res.result,
            }).then((res) => {
              if(res.data.code == 200){
                _this.getExpressData(); 
                uni.hideLoading();
                uni.showToast({
                	title: '签收成功',
                	duration: 2000,
                  position:'bottom'
                });
              }else if(res.data.code == 409){
                uni.hideLoading();
                uni.showToast({
                  title: '快递信息不一致，请检查!',
                  icon: 'none',
                  duration: 2000
                })
              }else {
                uni.showToast({
                  title: '签收失败',
                  icon: 'none',
                  duration: 2000
                });
              }
            })


          },
          fail() {
            uni.showToast({
              title: '签收失败，可能是服务错误',
              duration:2000,
              position: 'bottom',
              icon:'none'
            })
          }
        });
      }

    }
  }
</script>

<style>
  view {
    font-size: 13px;
  }

  .expressContainer {
    height: 100%;
    /* padding-top: 180rpx; */
  }

  .expressInformation {
    height: 100%;
    background-color: #f8f8f8;
    padding: 30rpx;
    margin: 0 auto;
    padding-top: 280rpx; 
  }

  .expressContainer .expressInformation .expressCard {
    position: relative;
    margin-bottom: 30rpx;
    width: 90%;
    height: 180rpx;
    /* border: 1px solid black; */
    padding: 30rpx;
    border-radius: 30rpx;
    background-color: #ffffff;
    box-shadow:
      0px 0px 3.7px rgba(0, 0, 0, 0.006),
      0px 0px 8.9px rgba(0, 0, 0, 0.008),
      0px 0px 16.8px rgba(0, 0, 0, 0.01),
      0px 0px 29.9px rgba(0, 0, 0, 0.012),
      0px 0px 56px rgba(0, 0, 0, 0.014),
      0px 0px 134px rgba(0, 0, 0, 0.02);
  }

  .expressContainer .expressInformation .expressCard .tag,
  .expressContainer .expressInformation .expressCard .third,
  .expressContainer .expressInformation .expressCard .first {
    margin-bottom: 20rpx;
  }

  .expressContainer .expressInformation .expressCard .first {
    font-size: 15px;
    font-weight: 1000;
    padding-left: 20rpx;
  }

  .expressContainer .expressInformation .expressCard .tag {
    font-size: 13px !important;
    padding-left: 20rpx;
  }

  .expressContainer .expressInformation .expressCard .third {
    font-size: 13px;
    line-height: 50rpx;
    padding-left: 20rpx;
    color: #a3a3a3;

  }

  .expressContainer .expressInformation .expressCard .tag .uni-tag {
    margin-right: 20rpx;
  }

  .expressContainer .expressInformation .expressCard .signBtn {
    position: absolute;
    right: 5%;
    top: 35%;
    margin-bottom: 0rpx;
  }
  /* 顶部的固定定位 */
  .top {
    width: 100%;
    height: 250rpx;
    background-color: #ffffff;
    position: fixed;
    z-index: 999;
  }
  
</style>
